<template>
	<!-- 设置默认地址 -->
	<view>
		<!--  头部 -->
		<view class="head-class">
			<text class="welyuans-class"></text>
			<text class="left-head-text">
				地址选择
			</text>
			<text class="right-head-text" @click="editShow">
				{{show?'查看':"编辑"}}
			</text>
		</view>

		<!--列表-->
		<view class="list-address-class">
			<view class="list-item-class" v-for="as in address">
				<text class="phone">手机号:{{as.adPhone}}</text>
				<text class="sheng">{{as.adProvince}}</text>
				<text class="cs">{{as.adCity}}</text>
				<text class="address">{{as.adAddress}}</text>
				<image @click="deleteAddress(as.adId)" v-if="show" class="img-delete-class" src="../../static/delete.png"></image>
			</view>
		</view>
		<view class="add-class" v-if="!show"
		@click="addAddress">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				url: this.$url + "/frontend",
				address: []
			}
		},
		created() {
			this.list()
		},
		mounted() {},
		methods: {
			addAddress(){
				uni.navigateTo({
					url: '../add-address/add-address'
				})
			},
			deleteAddress(id){
			var ids=[id]
				uni.request({
					url: `${this.url}/address/delete`,
					method: "post",
					data:ids,
					success: ({
						data
					}) => {
						this.list()
					}
				})
			},
			list() {
				uni.request({
					url: `${this.url}/address/list/all`,
					method: "GET",
					success: ({
						data
					}) => {
						this.address = data.data.data
					}
				})
			},

			editShow() {
				this.show = this.show ? false : true
			}
		}
	}
</script>

<style scoped>
	.img-delete-class{
		position: absolute;
		top: 0;
		width: 15px;
		height: 15px;
		right: 0;
	}
	.add-class{
		position: fixed;
		bottom: 10%;
		right: 10%;
		width: 35px;
		height: 35px;
		background-size: 100%;
	    background-image: url(../../static/address.png);
	      
	}
	.cs {
		position: absolute;
		right: 10px;
		top: 20%;
		font-size: 13px;
	}

	.address {
		position: absolute;
		right: 5px;
		bottom: 0;
		color: #9f9f9f;
		font-size: 12px;
	}

	.sheng {
		position: absolute;
		left: 50%;
		bottom: 0;
		line-height: 80px;
		font-size: 14px;
		font-weight: 600;
	}

	.phone {
		position: absolute;
		line-height: 80px;
		font-size: 12px;
	}

.list-item-class {
		position: relative;
		width: 100%;
		height: 80px;
		margin-top: 3px;
		background-color: #FFFFFF;
	}
	.list-item-class {
		position: relative;
		width: 100%;
		height: 80px;
		margin-top: 3px;
		background-color: #FFFFFF;
	}

	.left-head-text {
		position: absolute;
		font-size: 20px;
		color: #000000;
		font-weight: 800;
		left: 15px;
		line-height: 50px;
	}

	.right-head-text {
		position: absolute;
		right: 20px;
		font-size: 11px;
		color: #000000;
		line-height: 50px;
	}

	.welyuans-class {
		position: absolute;
		width: 6px;
		height: 30px;
		top: 1.2%;
		left: 5px;
		background-color: #007AFF;
	}

	.head-class {
		width: 100%;
		margin-top: 2px;
		height: 50px;
		background-color: #ffffff;
	}
</style>
